本篇介紹 ES2021 (ES12) 提供的 Logical assignment operators ( &&=、||= 和 ??= )。

過去的邏輯運算子和賦值表達式

假設你要先用 &&、|| 或 ?? 運算子檢查某個值是否合適，然後再進行賦值，常見的作法有以下幾種。

例如：nickName 是用來儲存使用者的暱稱，若沒有設定 nickName，預設值為空字串，但顯示在 UI 上會顯示 Anonymous，代表是否者未設定暱稱 (即匿名)。常見的作法會先用 || 運算子

let nickName = '';

nickName = nickName || 'Anonymous';
console.log(nickName);
// Anonymous

另一個情境：有一個 text 變數，若沒有設定初始值時，會設為預設文字 default。常見的作法會先用 ?? 運算子 (或 || 運算子，依情境而定) 檢查，然後再用 = 進行賦值：

let text;

text = text ?? 'default';
console.log(text);
// default

看起來沒什麼問題啊？但本篇要介紹的提案將以上寫法更簡化！把邏輯運算子和賦值表達式合在一起！

現代的邏輯賦值運算子

把某個運算子和賦值表達式合在一起其實很常見，例如：

let count = 0;

count += 66;
console.log(count);
// 66

count -= 10;
console.log(count);
// 56

count /= 4;
console.log(count);
// 14

count *= 2;
console.log(count);
// 28

所以將邏輯運算子和賦值表達式合在一起就是邏輯賦值運算子：&&=、||= 和 ??=。

資料來源

• tc39/proposal-logical-assignment: A proposal to combine Logical Operators and Assignment Expressions
• Logical assignment · V8
• ECMAScript feature: Logical assignment operators | 2ality